<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../../../css/common.css" />
		<style type="text/css">
			.content{
				background-color: #FFFFFF;
				overflow: hidden;
				padding-top: 1.5625rem;
			}

			.line_01 {
				/* padding: 0 3.75rem 0;  */
				font-size: 1rem;
				margin: 20px 0;
				color: #999999;
				line-height: 1px;
				border-left: 4.75rem solid #ddd;
				border-right: 4.75rem solid #ddd;
				text-align: center;
			}

			.line-box {
				padding: 0 3.75rem;
			}

			.pay-money {
				text-align: center;
				color: #333333;
				margin-bottom: 3.125rem;
			}

			.pay-money .fuhao {
				font-size: 1.25rem;
			}

			.pay-money .money-num {
				font-size: 2.25rem;
			}

			.pay-ment {
				margin: 0 0.9375rem 1.875rem;
				border: solid 0.0625rem #eeeeee;
				border-radius: 0.25rem;
				background-color: #f8f8f8;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0.9375rem;
			}
			.pay-ment-left{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 1rem;
				color: #333333;
			}
			.payment_weixin {
				width: 1.25rem;
				height: 1.25rem;
				margin-right: 0.6875rem;
			}

			.common_choice {
				width: 1rem;
				height: 1rem;
			}
			.btn-content{
				padding: 3.125rem;
			}
			.btn{
				width: 17.1875rem;
					height: 2.4375rem;
					line-height: 2.4375rem;
					background-color: #187800;
					border-radius: 1.25rem;
					color: #FFFFFF;
					text-align: center;
					font-size: 1rem;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="content">
				<div class="line-box" style="margin-bottom: 2.5625rem;">
					<div class="line_01">付款金额</div>
				</div>
				<div class="pay-money">
					<span class="fuhao">￥</span><span class="money-num">100.00</span>
				</div>
				<div class="line-box" style="margin-bottom: 2.5625rem;">
					<div class="line_01">支付方式</div>
				</div>
				<div class="pay-ment">
					<!-- 45456464546 -->
					<div class="pay-ment-left">
						<img src="../../../../images/cart/icon_payment_weixin.png" class="payment_weixin">
						<span>微信支付</span>
					</div>
					<div class="pay-ment-right">
						<img id="unselected" src="../../../../images/cart/icon_common_choice_unselected.png"
							class="common_choice">
						<img hidden id="selected" src="../../../../images/cart/icon_common_choice_selected.png"
							class="common_choice">
						<!-- <span>微信支付</span> -->
					</div>
				</div>
			</div>
			<div class="btn-content">
				<div class="btn">
					立即支付
				</div>
			</div>
		</div>
		<script src="../../../../js/mui.min.js"></script>
		<script src="../../../../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../../js/resize.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
			$(function($) {
				// 文档一加载就执行
				$(document).ready(function() {
					obj.setRem()
				})
				// 窗口调节
				$(window).resize(function() {
					obj.setRem()
				});
				// 选择
				$('.pay-ment').on('click',function(){
					$('#unselected').toggle();
					$('#selected').toggle();
				})
			})
		</script>
	</body>

</html>
